.sidebar-menu
  flex: 1
  background-color: #232b38
.menu-items
  margin: 0
  // padding: 8px 0
  list-style: none
  line-height: 1.5
  ul
    display: none
    margin: 0
    padding: 8px 0
    list-style: none
    line-height: 1.5
  li
    display: block
    position: relative
    margin: 0
    padding: 0
    border: 0
    >a
      display: block
      position: relative
      margin: 0
      border: 0
      padding: 0 15px
      line-height: 36px
      text-decoration: none
      font-size: 14px
      font-weight: 600
      color: #fff
      cursor: pointer
      &:not([href]):not([tabindex])
        color: #fff
      &:hover
        background: #39414c
      >i
        margin-left: 4px
        margin-right: 4px
        font-size: 18px
      .arrow:before
        position: absolute
        top: 4px
        right: 14px
        width: 20px
        height: auto
        text-align: center
        display: inline
        font-size: 12px
        font-weight: 300
        content: "\e615"
    &.active
      >a
        background: #29a1f7
    &.open
      >ul
        display: block
      >a>.arrow:before
        content: "\e614"
  ul a
    padding-left: 40px
  ul ul a
    padding-left: 60px
  ul ul ul a
    padding-left: 80px
  >li
    &.active
      >a
        background: #03a9f4
        border-top-color: transparent
        color: #fff
        &:hover
          background: #03a9f4
        .arrow:before
          color: #fff
    >a
      padding: 10px 9px
      border-top: 1px solid #3d4957
      &:hover
        background: #3e4b5c
      .arrow:before
        top: 8px
  &.navbar-close
    >li
      >ul
        display: none
      >a
        padding: 10px 0
        i
          display: inline-block
          margin: 0
          width: 45px
          text-align: center
        .title
          display: none
        .arrow
          display: none
      &.active
        >a
          background: #03a9f4
          border-top-color: transparent
          color: #fff
          &:hover
            background: #03a9f4
          .arrow:before
            color: #fff
    &.hover
      width: 235px
      >li
        &.open
          >ul
            display: block
        >a
          padding: 10px
          i
            display: inline
            margin: 0
            width: 45px
            text-align: center
          .title
            display: block
          .arrow
            display: inline
        &.active
          >a
            background: #03a9f4
            border-top-color: transparent
            color: #fff
            &:hover
              background: #03a9f4
            .arrow:before
              color: #fff
.app
  .menu-items li > a
    &>.title, &>.arrow, &>.subtitle, &>.justify-title
      display: none
  .sidebar
    z-index: 799
    display: flex
    width: 45px
  &.sidebar-open
    .sidebar
      width: 180px
  &.sidebar-visible
    .sidebar .sidebar-menu
      position: absolute
      z-index: 798
      top: 0
      bottom: 0
      width: 180px
  &.sidebar-visible, &.sidebar-open
    .menu-items li > a
      &>.arrow, &>.title
        display: inline
      &>.justify-title, &>.subtitle
        display: block
